<template>
  <div class="login-container">
    <form @submit.prevent="handleLogin" class="login-form">
      <h2>校园二手物品交易平台</h2>
      <div class="form-group">
        <label>账号：</label>
        <input
          type="text"
          v-model="username"
          placeholder="请输入账号"
          required
        />
      </div>
      <div class="form-group">
        <label>密码：</label>
        <input
          type="password"
          v-model="password"
          placeholder="请输入密码"
          required
        />
      </div>
      <button type="submit" class="login-btn">登录</button>
    </form>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'

const username = ref('fit')
const password = ref('123456')
const router = useRouter()

const handleLogin = () => {
  if (username.value === 'fit' && password.value === '123456') {
    ElMessage.success('登录成功！')
    router.push('/home/page1')
  } else {
    ElMessage.error('账号或密码错误！')
    // 清空输入框
    username.value = ''
    password.value = ''
  }
}
</script>

<style scoped>
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-image: url('../../assets/2.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: white;
  font-family: 'Arial', sans-serif;
}

.login-form {
  background: white;
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
  width: 320px;
}

h2 {
  text-align: center;
  color: #333;
  margin-bottom: 1.5rem;
}

.form-group {
  margin-bottom: 1.2rem;
}

label {
  display: block;
  margin-bottom: 0.5rem;
  color: #666;
}

input {
  width: 100%;
  padding: 0.8rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-sizing: border-box;
}

.login-btn {
  width: 100%;
  padding: 0.8rem;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.login-btn:hover {
  background-color: #0056b3;
}
</style>